// 进度条模块
; (function (root) {
    // 进度条
    function Progress() {
        this.durTime = 0; // 总时长
        this.frameId = null; // 定时器
        this.startTime = 0; // 开始播放的时间
        this.lastPercent = 0;
        this.init()
    }

    Progress.prototype = {
        init() {
            this.getDom()
        },
        getDom() {
            this.curTime = document.querySelector('.curTime')
            this.circle = document.querySelector('.circle')
            this.fontBg = document.querySelector('.fontBg')
            this.totalTime = document.querySelector('.totalTime')
        },
        renderAllTime(time) { // 处理总时间
            this.durTime = time
            this.totalTime.innerHTML = this.formatTime(time)
        },
        formatTime(time) {
            time = Math.round(time)
            let m = Math.floor(time / 60)
            let s = time % 60;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return m + ':' + s
        },
        move(per) { // 移动进度条
            const _this = this
            this.startTime = new Date().getTime(); // 开始播放时间
            this.lastPercent = per === undefined ? this.lastPercent : per;
            this.stop()
            function frame() {
                var curTime = new Date().getTime();
                // 加上一次停止时间
                var per = _this.lastPercent + (curTime - _this.startTime) / (_this.durTime * 1000);
                if (per <= 1) { // 当前歌曲还没有播放完成
                    _this.update(per)
                } else { // 播放完成
                    _this.stop()
                }
                _this.frameId = requestAnimationFrame(frame)
            }
            frame()
        },
        update(per) { // 更新进度条（时间，百分比）
            const time = this.formatTime(per * this.durTime)
            this.curTime.innerHTML = time
            // this.circle.style.left = `calc(${per * 100 }% - 3vw)`
            this.fontBg.style.width = per * 100 + '%'
            var l = per * this.circle.parentNode.offsetWidth;
            this.circle.style.transform = 'translateX(' + l + 'px)'
        },
        stop() {
            cancelAnimationFrame(this.frameId)
            var stopTime = new Date().getTime();
            this.lastPercent += (stopTime - this.startTime) / (this.durTime * 1000); // 记录播放进度 上一次播放进度 + 本次播放时长
            console.log('lastPercent', this.lastPercent)
        }
    }

    function instanceProperess() {
        return new Progress()
    }
    // 拖拽
    function Drag(obj) {
        this.obj = obj;// dom元素
        this.startPointX = 0; // 拖拽时按下的坐标
        this.startLeft = 0;// 按下时已经走的距离
        this.percent = 0; // 拖拽的百分比
    }

    Drag.prototype = {
        init() {
            const _this = this;
            this.obj.style.transform = 'translate(0)';
            const parentw = this.obj.parentNode.offsetWidth
            this.obj.addEventListener('touchstart', function (e) {
                // changedTouches 触摸点列表
                _this.startPointX = e.changedTouches[0].pageX
                _this.startLeft = parseFloat(this.style.transform.split('(')[1]);
                _this.start && _this.start(); // 对外暴露拖拽开始的方法，按下后要做的事交给用户
            })
            this.obj.addEventListener('touchmove', function (e) {
                _this.disPointX = e.changedTouches[0].pageX - _this.startPointX; // 拖到距离
                let move = _this.startLeft + _this.disPointX; // 移动距离

                move = move <= 0 ? 0 : move;
                move = move >= parentw ? parentw : move;
                this.style.transform = `translateX(${move}px)`;
                // 百分比
                _this.percent = move / parentw;
                _this.move && _this.move(_this.percent);
                e.preventDefault()
            })
            this.obj.addEventListener('touchend', function (e) {
                _this.end && _this.end( _this.percent);
            })
        }
    }


    function instanceDrag(obj) {
        return new Drag(obj)
    }
    root.progress = {
        pro: instanceProperess,
        drag: instanceDrag
    }

})(window.player || (window.player = {}))